<template lang="html">
	<div class="home">
		<div class="left" v-show="isShow">
			<p id="leftmenu">
				<router-link to="/home/leftfruit" slot="home">水果</router-link>
				<router-link to="/home/leftqingshi" slot="home">轻食</router-link>
			</p>
			<router-view name="left"></router-view>
		</div>
		<div class="right">
			<header>
				<img src="../assets/dz2.png" alt="a">
				<ul>
					<router-link to="address">
						<li>北京市 <span></span></li>
						<li>三旗百汇</li>
					</router-link>
				</ul>
				<img src="../assets/header-3.png" alt="a">
			</header>
			<div class="menu">
				<ul class="menu_left">
					<li @click="isShow=!isShow"><img src="../assets/fenlei.png"></li>
					<li><router-link to="/search"><img src="../assets/search.png"></router-link></li>
				</ul>
				<ul class="menu_right">
					<li><router-link to="/home/">首页</router-link></li>
					<li><router-link to="/home/drink">水果</router-link></li>
					<li><router-link to="/home/drink">轻食</router-link></li>
					<li><router-link to="/home/drink">优品生活</router-link></li>
					<li><router-link to="/home/drink">乳品</router-link></li>
					<li><router-link to="/home/drink">零食</router-link></li>
					<li><router-link to="/home/drink">茶饮</router-link></li>
					<li><router-link to="/home/drink">礼品</router-link></li>
        </ul>
			</div>
			<router-view name="s"></router-view>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				isShow:false
			}
		}
	}
</script>
<style lang="css">
	.home {
		width: 180%;
		height: 100%;
	}

	.left {
		float: left;
		width: 45%;
		height: 20rem;
	}

	.right {
		width: 55%;
		float: left;
		height: 100%;
	}

	.home header {
		height: 2rem;
		width: 100%;
		background: #ffc000;
		position: fixed;
		top: 0;
		z-index: 20;
	}

	.home header img:nth-of-type(1) {
		float: left;
		margin: 0.2rem 0.3rem;
		padding-right: 0.25rem;
		width: 1.6rem;
		height: 1.6rem;
		border-right: 0.1rem solid #3E3D3D;
	}

	.home header img:nth-of-type(2) {
		float: right;
		width: 1.3rem;
		height: 1.3rem;
		padding: 0.3rem 0.3rem 0 0;
	}

	.home header ul {
		float: left;
	}

	.home header ul li {
		color: #000000;
		font-size: 0.7rem;
	}

	.home header ul li span {
		display: inline-block;
		margin: 0.2rem 0 0 0.4rem;
		border: 0.2rem solid transparent;
		border-left: 0.2rem solid #000;
	}

	.menu {
		width: 100%;
		height: 3.5rem;
		position: fixed;
		top: 2rem;
		z-index: 20;
		border-bottom: 0.05rem solid lightgray;
	}

	.menu ul {
		background: white;
	}

	.menu_left {
		width: 1.75rem;
		float: left;
	}

	.menu_left li img {
		display: block;
		width: 1.75rem;
		height: 1.75rem;
	}

	.menu_right {
		width: 14.2rem;
		height: 3.5rem;
		float: left;
	}

	.menu_right li {
		float: left;
		width: 2.8rem;
		height: 1.7rem;
		line-height: 1.7rem;
		text-align: center;
		font-size: 0.6rem;
		color: dimgray;
		border-bottom: 0.05rem solid #E4E4E4;
	}

	.menu_right li:hover {
		height: 1.65rem;
		border-bottom: 0.1rem solid #3E3D3D;
	}

	.menu_right li a {
		color: dimgray;
	}

	.left p {
		width: 100%;
		height: 3rem;
		border-top: 0.5rem solid #4C5559;
		font-size: 0;
	}

	.left p a {
		font-size: 1rem;
		display: inline-block;
		width: 41%;
		height: 2.95rem;
		line-height: 2.95rem;
		text-align: center;
		border-bottom: 0.05rem solid grey;
		color: #C7DB59;
		background: #B5B5B5;
	}

	.left .router-link-active {
		border-bottom: 0;
		background: #F5F6F7;
		color: #ffc000;
	}

	.shouye {
		margin-top: 5rem;
	}

	#leftmenu{
		position: fixed;
		top:0;
		left:0;

	}

</style>
